<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-date-picker
            v-model="formData[item.prop]"
            :readonly="item.readonly"
            :disabled="item.disabled"
            :editable="item.editable"
            :clearable="item.clearable"
            :size="item.size | setSize(item.size)"
            :placeholder="item.placeholder"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder"
            :time-arrow-control="item.timeArrowControl"
            :type="item.type"
            :format="item.format"
            :align="item.align"
            :popper-class="item.popperClass"
            :range-separator="item.rangeSeparator"
            :default-value="item.defaultValue"
            :default-time="item.defaultTime"
            :value-format="item.valueFormat"
            :name="item.name"
            :unlink-panels="item.unlinkPanels"
            :prefix-icon="item.prefixIcon"
            :clear-icon="item.clearIcon"
            :validate-event="item.validateEvent"
            :append-to-body="item.appendToBody"
            :picker-options="item.pickerOptions"
            @change="handleChange"
            @blur="handleBlur"
            @focus="handleFocus"
        >
            <template slot="range-separator">
                <slot></slot>
            </template>
        </el-date-picker>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-dateTimePicker',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     *日期格式
                     * 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())
                     * 使用format指定输入框的格式；使用value-format指定绑定值的格式。默认情况下，组件接受并返回Date对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：
                     * 请注意大小写
                     *  格式	    含义	             备注	                                         举例
                        yyyy	    年		                                                            2017
                        M	        月	                不补0	                                          1
                        MM	        月		                                                             01
                        W	        周	                仅周选择器的 format 可用；不补0	                   1
                        WW	        周	                仅周选择器的 format 可用	                       01
                        d	        日	                不补0	                                          2
                        dd	        日		                                                             02
                        H	        小时	            24小时制；不补0	                                   3
                        HH	        小时	            24小时制	                                      03
                        h	        小时	            12小时制，须和 A 或 a 使用；不补0	                3
                        hh	        小时	            12小时制，须和 A 或 a 使用	                       03
                        m	        分钟	            不补0	                                          4
                        mm	        分钟		                                                          04
                        s	        秒	                不补0	                                          5
                        ss	        秒		                                                              05
                        A	        AM/PM	            仅 format 可用，大写	                           AM
                        a	        am/pm	            仅 format 可用，小写	                           am
                        timestamp	JS时间戳	        仅 value-format 可用；组件绑定值为number类型	    1483326245000
                        [MM]	    不需要格式化字符	 使用方括号标识不需要格式化的字符 (如 [A] [MM])	      MM
                     */
                    /**
                     * 快捷选项
                     * @type object
                     * @value {}
                     * 当前时间日期选择器特有的选项参考下表
                     */
                    pickerOptions: {
                        /**
                         * 设置禁用状态，参数为当前日期，要求返回 Boolean
                         * @type Function
                         * @param Date  当前日期
                         * @return Boolean  日期是否禁用
                         */
                        disabledDate(date) {
                            return date.getTime() > Date.now()
                        },
                        shortcuts: [
                            {
                                text: '今天',
                                onClick(picker) {
                                    picker.$emit('pick', new Date())
                                }
                            },
                            {
                                text: '昨天',
                                onClick(picker) {
                                    const date = new Date()
                                    date.setTime(
                                        date.getTime() - 3600 * 1000 * 24
                                    )
                                    picker.$emit('pick', date)
                                }
                            },
                            {
                                text: '一周前',
                                onClick(picker) {
                                    const date = new Date()
                                    date.setTime(
                                        date.getTime() - 3600 * 1000 * 24 * 7
                                    )
                                    picker.$emit('pick', date)
                                }
                            }
                        ],
                        cellClassName: function(date) {
                            console.log(date)
                        },
                        /**
                         * 周起始日
                         */
                        firstDayOfWeek: 7
                    },
                    /**
                     * 绑定值
                     * @type date(DatePicker) / array(DateRangePicker)
                     * @value 0
                     */
                    datePickerVal: new Date(),
                    /**
                     * 完全只读
                     * @type boolean
                     * @value true/false
                     */
                    readonly: false,
                    /**
                     * 是否禁用
                     * @type boolean
                     * @value true/false
                     */
                    disabled: false,
                    /**
                     * 文本框可输入
                     * @type boolean
                     * @value true/false
                     */
                    editable: true,
                    /**
                     * 是否显示清除按钮
                     * @type boolean
                     * @value true/false
                     */
                    clearable: true,
                    /**
                     * 输入框尺寸
                     * @type string
                     * @value large, small, mini
                     */
                    size: 'medium',
                    /**
                     * 非范围选择时的占位内容
                     * @type string
                     * @value
                     */
                    placeholder: '',
                    /**
                     * 范围选择时开始日期的占位内容
                     * @type string
                     * @value
                     */
                    startPlaceholder: '',
                    /**
                     * 范围选择时结束日期的占位内容
                     * @type string
                     * @value
                     */
                    endPlaceholder: '',
                    /**
                     * 是否使用箭头进行时间选择
                     * @type boolean
                     * @value false/true
                     */
                    timeArrowControl: false,
                    /**
                     * 显示类型
                     * @type string
                     * @value year/month/date/week/ datetime/datetimerange/daterange
                     */
                    type: 'date',
                    /**
                     * 显示在输入框中的格式
                     * @type string
                     * @value
                     */
                    format: 'yyyy-MM-dd',
                    /**
                     * 对齐方式
                     * @type string
                     * @value left, center, right
                     */
                    align: 'left',
                    /**
                     * DatePicker 下拉框的类名
                     * @type string
                     * @value
                     */
                    popperClass: '',
                    /**
                     * 选择范围时的分隔符
                     * @type string
                     * @value '-'
                     */
                    rangeSeparator: '-',
                    /**
                     * 可选，选择器打开时默认显示的时间 可被new Date()解析
                     * @type Date
                     * @value
                     */
                    defaultValue: '',
                    /**
                     * 范围选择时选中日期所使用的当日内具体时刻
                     * @type string[]
                     * @value 数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00
                     */
                    defaultTime: ['12:00:00'],
                    /**
                     * 可选，绑定值的格式。不指定则绑定值为 Date 对象
                     * @type string
                     * @value
                     */
                    valueFormat: 'yyyy-MM-dd',
                    /**
                     * 原生属性
                     * @type string
                     * @value
                     */
                    name: '',
                    /**
                     * 在范围选择器里取消两个日期面板之间的联动
                     * @type boolean
                     * @value true/false
                     */
                    unlinkPanels: false,
                    /**
                     * 自定义头部图标的类名
                     * @type string
                     * @value 'el-icon-date'
                     */
                    prefixIcon: 'el-icon-date',
                    /**
                     * 自定义清空图标的类名
                     * @type string
                     * @value 'el-icon-circle-close'
                     */
                    clearIcon: 'el-icon-circle-close',
                    /**
                     * 输入时是否触发表单的校验
                     * @type boolean
                     * @value true/false
                     */
                    validateEvent: true,
                    /**
                     * DetePicker 自身是否插入至 body 元素上。
                     * @type boolean
                     * @value true/false
                     */
                    appendToBody: true,
                    /**
                     * 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表
                     * @type Object[]
                     * @value
                     */
                    shortcuts: [{}],
                    /**
                     * 设置禁用状态，参数为当前日期，要求返回 Boolean
                     * @type Function
                     * @value
                     */
                    disabledDate: Function,
                    /**
                     * 设置日期的 className
                     * @type Function(Date)
                     * @value
                     */
                    cellClassName: Function(Date),
                    /**
                     * 周起始日
                     * @type Number
                     * @value 1 到 7
                     */
                    firstDayOfWeek: 7,
                    /**
                     * 选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效
                     * @type Function({ maxDate, minDate })
                     * @value
                     */
                    onPick: Function({}),
                    /**
                     * 标题文本
                     * @type string
                     * @value
                     */
                    text: '',
                    /**
                     * 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())
                     * @type function
                     * @value
                     */
                    onClick: Function,
                    /**
                     * 自定义输入框类名
                     * @type string
                     * @value 'red'
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
         * @param 改变后的值
         *
         */
        handleChange(data) {
            this.dispatch('baseForm', 'onDateTimePickerChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 数据改变时触发（使用鼠标拖曳时，活动过程实时触发）
         * @param 改变后的值
         *
         */
        handleBlur(data) {
            this.dispatch('baseForm', 'onDateTimePickerBlur', {
                data,
                prop: this.item.prop
            })
        },
        /**
         * 数据改变时触发（使用鼠标拖曳时，活动过程实时触发）
         * @param 改变后的值
         *
         */
        handleFocus(data) {
            this.dispatch('baseForm', 'onDateTimePickerFocus', {
                data,
                prop: this.item.prop
            })
        }
    }
}
</script>
